<template>
  <a-card :bordered="false">
    <!--导航区域-->
    <div>
      <a-tabs defaultActiveKey="LOGIN" @change="callback">
        <a-tab-pane tab="登录日志" key="LOGIN"></a-tab-pane>
        <a-tab-pane tab="操作日志" key="OPERATE"></a-tab-pane>
      </a-tabs>
    </div>

    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">

            <a-form-item label="搜索日志">
              <a-input autocomplete="off" placeholder="请输入搜索关键词" v-model="queryParam.keyWord.value"></a-input>
            </a-form-item>

            <a-form-item label="创建时间" >
              <a-range-picker
                style="width: 350px"
                format="YYYY-MM-DD HH:mm:ss"
                :placeholder="['开始时间', '结束时间']"
                @change="onDateChange"
                @ok="onDateOk"
              />
            </a-form-item>
          <a-form-item>
            <span class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary"  @click="searchReset" icon="reload" >重置</a-button>
               <a-button v-has="'SYS:LOG:CLEAR_URL_INFO'" type="primary"  @click="searchReset" icon="reload" >清空Url信息缓存</a-button>
              <a-button v-has="'SYS:LOG:DEL'" v-if="selectedRowKeys.length > 0" type="danger"  @click="batchDel" icon="delete" >批量删除</a-button>
            </span>
          </a-form-item>
      </a-form>
    </div>

    <!-- table区域-begin -->
    <a-table
      ref="table"
      size="middle"
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
      @change="handleTableChange">

       <span slot="action" slot-scope="text, record">
          <a-popconfirm v-has="'SYS:LOG:DEL'" @confirm="() =>handleDelete(record.id)">
            <a-icon type="delete"/>
            删除
          </a-popconfirm >
        </span>
      <!-- 字符串超长截取省略号显示-->
      <span slot="ellipsis" slot-scope="text">
          <ak-ellipsis :value="text" :length="25" />
        </span>
      <template v-if="queryParam.logType.value=='OPERATE'" slot="expandedRowRender" slot-scope="record" style="margin: 0">
        <div style="margin-bottom: 5px"><a-badge status="success" style="vertical-align: middle;"/><span style="vertical-align: middle;">请求方法:{{ record.method }}</span></div>
        <div><a-badge status="processing" style="vertical-align: middle;"/><span style="vertical-align: middle;">请求参数:{{ record.requestParam }}</span></div>
      </template>

    </a-table>
    <!-- table区域-end -->
  </a-card>
</template>

<script>
  // import { filterObj } from '../../utils/util';
  import AkfhListMixin from '../../mixin/AkfhListMixin';
  import { sysLogUrl } from '../../api/url'
  import AkEllipsis from '../../components/akfh/AkEllipsis'

  export default {
    name: "LogList",
    components: { AkEllipsis },
    mixins:[AkfhListMixin],
    data () {
      return {
        description: '这是日志管理页面',
        createTimeRange:[],
        // 查询条件
        queryParam: {
          createDateTimeStart:{
            value:'',
            type:'gt',
            column:'createDateTime'
          },
          createDateTimeEnd:{
            value:'',
            type:'lt',
            column:'createDateTime'
          },
          logType:{
            value:'LOGIN',
            type:'eq',
            column:'logType'
          },
          keyWord:{
            value:'',
            type:'like',
            column:'logContent'
          },
        },
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title: '日志内容',
            align:"left",
            dataIndex: 'logContent',
            sorter: true,
            scopedSlots: {customRender: 'ellipsis'},
          },
          {
            title: '操作人ID',
            dataIndex: 'userId',
            align:"center",
            sorter: true,
            scopedSlots: {customRender: 'ellipsis'},
          },
          {
            title: '操作人机构',
            dataIndex: 'orgName',
            align:"center",
            sorter: true
          },
          {
            title: '操作人名称',
            dataIndex: 'username',
            align:"center",
            sorter: true
          },
          {
            title: 'IP',
            dataIndex: 'ip',
            align:"center",
            sorter: true
          },
          {
            title: '耗时(毫秒)',
            dataIndex: 'costTime',
            align:"center",
            sorter: true
          },
          {
            title: '日志类型',
            dataIndex: 'logType_dictText',
            align:"center",
          },
          {
            title: '创建时间',
            dataIndex: 'createDateTime',
            align:"center",
            sorter: true
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: "center",
            scopedSlots: {customRender: 'action'},
          }
        ],
        labelCol: {
          xs: { span: 1 },
          sm: { span: 2 },
        },
        wrapperCol: {
          xs: { span: 10 },
          sm: { span: 16 },
        },
        url: sysLogUrl
      }
    },
    methods: {

      // 日志类型
      callback(key){
        let that=this;
        that.queryParam.logType.value=key;
        that.loadData();
      },
      onDateChange: function (value, dateString) {
        this.queryParam.createDateTimeStart.value=dateString[0];
        this.queryParam.createDateTimeEnd.value=dateString[1];
      },
      onDateOk() {
      },
    }
  }
</script>
<style scoped>
  @import "../../assets/less/common.less";
</style>